{% extends 'auto_sale/base.html' %}

{% block script %}
    <title>Shade Bootstarp Website Template | Single :: w3layouts</title>
    <link href="/static/css/bootstrap.css" rel='stylesheet' type='text/css' media="all"/>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <link rel="stylesheet" href="/static/css/demo1.css"/>
    <link rel="stylesheet" href="/static/css/imagezoom.css"/>
    <link rel="stylesheet" href="/static/css/es-cus.css"/>
    <script src="/static/js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.imagezoom.min.js"></script>
    <script type="text/javascript" src="/static/js/modernizr.custom.17475.js"></script>
    <script type="text/javascript" src="/static/js/jquery.elastislide.js"></script>

    <script type="text/javascript">
        eval(function (p, a, c, k, e, d) {
            e = function (c) {
                return (c < a ? "" : e(parseInt(c / a))) + ((c = c % a) > 35 ? String.fromCharCode(c + 29) : c.toString(36))
            };
            if (!''.replace(/^/, String)) {
                while (c--)d[e(c)] = k[c] || e(c);
                k = [function (e) {
                    return d[e]
                }];
                e = function () {
                    return '\\w+'
                };
                c = 1;
            }
            ;
            while (c--)if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]);
            return p;
        }('$(7(){$(\'#1d\').j();9 a=$(\'#12\').A({B:0,z:3,C:7(c,d,e){c.E().D("8");c.k("8");a.y(d);e.x();9 f=$(\'#16\').g(\'m\');f.K(c.l(\'i\').M(\'G\'),c.l(\'i\').g(\'L\'))},H:7(){$(\'#16\').j({t:\'u/v/3.p\'});$(\'#12 J:F(0)\').k(\'8\')}});$(\'#W\').j({w:\'X\',17:[o,s],t:\'u/v/6.p\',15:[10,-4],r:\'13\'});9 b=$(\'#W\').g(\'m\');$(n).N(7(){h=$(n).U();S(h>R){b.q(o,s)}T{b.q(h*0.4,h*0.4*0.14)}});9 a=$(\'#O\').A({B:1,z:4,C:7(c,d,e){c.E().D("8");c.k("8");a.y(d);e.x();9 f=$(\'#I\').g(\'m\');f.K(c.l(\'i\').M(\'G\'),c.l(\'i\').g(\'L\'))},H:7(){$(\'#I\').j({w:\'X\',17:[o,s],t:\'u/v/2.p\',15:[10,-4],r:\'13\',1a:7(c){c.$Q.1b().19(P)},18:7(c){c.$Q.1f().1e(P)}});$(\'#O J:F(1)\').k(\'8\');$(n).N(7(){9 c=$(\'#I\').g(\'m\');h=$(n).U();S(h>R){c.q(o,s)}T{c.q(h*0.4,h*0.4*0.14)}})}});$(\'#1c\').j({w:\'Y\',r:\'11\'});9 a=$(\'#Z\').A({B:0,z:4,C:7(c,d,e){c.E().D("8");c.k("8");a.y(d);e.x();9 f=$(\'#V\').g(\'m\');f.K(c.l(\'i\').M(\'G\'),c.l(\'i\').g(\'L\'))},H:7(){$(\'#V\').j({w:\'Y\',t:\'u/v/5.p\',r:\'11\'});$(\'#Z J:F(0)\').k(\'8\')}})});', 62, 78, '|||||||function|active|var|||||||data|winWidth|img|ImageZoom|addClass|find|imagezoom|window|480|jpg|changeZoomSize|zoomViewerClass|300|bigImageSrc|demo_assets|large|type|preventDefault|setCurrent|minItems|elastislide|start|onClick|removeClass|siblings|eq|src|onReady|demo4|li|changeImage|largeimg|attr|resize|demo4carousel|500|viewer|900|if|else|width|demo6|demo3|standard|follow|demo2carousel||followViewer|demo2carousel|standardViewer|625|offset|demo2|zoomSize|onHide|fadeIn|onShow|hide|demo5|demo1|fadeOut|show'.split('|'), 0, {}))
    </script>
    <!-- Custom Theme files -->
    <link href="/static/css/style.css" rel='stylesheet' type='text/css' media="all"/>
    <!-- Custom Theme files -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);
    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- Google Fonts -->
    <link rel="stylesheet" href="/static/css/sticky-navigation.css"/>
    <link href="/static/css/demo.css" rel="stylesheet" type="text/css"/>
    <script>
        $(function () {

            // grab the initial top offset of the navigation
            var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;

            // our function that decides weather the navigation bar should have "fixed" css position or not.
            var sticky_navigation = function () {
                var scroll_top = $(window).scrollTop(); // our current vertical position from the top

                // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
                if (scroll_top > sticky_navigation_offset_top) {
                    $('#sticky_navigation').css({'position': 'fixed', 'top': 0, 'left': 0});
                } else {
                    $('#sticky_navigation').css({'position': 'relative'});
                }
            };

            // run our function on load
            sticky_navigation();

            // and run it again every time you scroll
            $(window).scroll(function () {
                sticky_navigation();
            });

            // NOT required:
            // for this demo disable all links that point to "#"
            $('a[href="#"]').click(function (event) {
                event.preventDefault();
            });

            {% comment %}$('[class = html_productModel]').click(function (event) {
                alert('hello')

                var inventory = $(this).attr("myInventory");
                var productModel = $(this).html();

                //$('#btn_addToShopCar').attr('productModel', productModel)

                $(this).productModel = productModel

                //alert(inventory.toString())
                //$("#p_inventory").attr("text",inventory.toString()); //这个为啥没用
                $("#p_inventory").text(inventory.toString());
            });

            $('#btn_addToShopCar').click(function (event) {
                alert('hello')
                $.getJSON('/addToShopCar/', {'productId': {{product.productId}}, 'productName': {{product.productId}}, 'paymentWebsite':{{ product.paymentWebsite }}  }, function (msg) {
                        alert(msg)
                    })
            });{% endcomment %}

            var modelName = ''
            $('[class = html_productModel]').click(function (event) {
                var inventory = $(this).attr("myInventory");
                modelName = $(this).html();

                //$('#btn_addToShopCar').attr('productModel', productModel)

                $(this).productModel = modelName

                //$("#p_inventory").attr("text",inventory.toString()); //这个为啥没用
                $("#p_inventory").text(inventory.toString());
            });

            $('#btn_addToShopCar').click(function (event) {
                if (modelName == '') {
                    alert('请先选择型号')
                }
                else {
                    $.getJSON('/addToShopCar/', {'productId': {{ product.productId }}, 'modelName': modelName},
                        function (msg) {
                            alert('middle')
                            $("#tip_addToShopCar").html(msg);
                        });
                    alert('添加成功')
                }
            });

        });
    </script>
{% endblock %}

{% block content %}
    <div class="pag-nav">
        <ul class="p-list">
            <li><a href="/index/">Home</a></li> &nbsp;&nbsp;/&nbsp;
            <li><a href="men.html">Men</a></li>
        </ul>
    </div>
    <div class="page">
        <!--demo2-->
        <div class="box cf">
            <div class="left">
                <span class="demowrap"><img id="demo2" src={{ product.image }}></span>
                <ul id="demo2carousel" class="elastislide-list">
                    {% for booth_image in booth_image_list %}
                        <li><a href="#"><img src={{ booth_image.net_path }}></a></li>                    {% endfor %}
                </ul>
            </div>
        </div>
        <!--demo6-->
        <div class="clearfix"></div>
    </div>
    <div class="coats sing-c">

        <h3 class="c-head">{{ product.name }}</h3>
        <p>&euro; {{ product.price }}</p>

                <p class="art"> {{ product.name }} </p>

        <div class="size">

            库存:<p id="p_inventory">{{ product.count }}</p>

            <small>Color</small>
            <ul class="size-list">
                {% for color in color_list %}
                    <li><a class='html_productModel' href="#"
                           myInventory={{ product.count }}>{{ color.name }}</a></li>
                {% endfor %}
            </ul>

            <small>Size</small>
            <ul class="size-list">
                {% for size in size_list %}
                    <li><a class='html_productModel' href="#"
                           myInventory={{ product.count }}>{{ size.name }}</a></li>
                {% endfor %}
            </ul>

        </div>
        <input type="button" value="加入购物车" id="btn_addToShopCar"/>
        <span id="tip_addToShopCar"></span>
    </div>

    <div align="center">
        {% for detail_image in detail_image_list %}
            <img src="{{ detail_image.net_path }}">
            <br>
        {% endfor %}
    </div>

    <div class="look">
        <h3>You May Also Like</h3>
    </div>
    <!-- Partners Starts Here --->
    <div class="partner flexy">
        <ul id="flexiselDemo3">
            <li><img src="/static/images/ss1.jpg" class="img-responsive" alt=""/></li>
            <li><img src="/static/images/ss2.jpg" class="img-responsive" alt=""/></li>
            <li><img src="/static/images/ss3.jpg" class="img-responsive" alt=""/></li>
            <li><img src="/static/images/ss4.jpg" class="img-responsive" alt=""/></li>
            <li><img src="/static/images/ss5.png" class="img-responsive" alt=""/></li>
        </ul>
        <script type="text/javascript">
            $(window).load(function () {
                $("#flexiselDemo3").flexisel({
                    visibleItems: 5,
                    animationSpeed: 1000,
                    autoPlay: true,
                    autoPlaySpeed: 3000,
                    pauseOnHover: true,
                    enableResponsiveBreakpoints: true,
                    responsiveBreakpoints: {
                        portrait: {
                            changePoint: 480,
                            visibleItems: 1
                        },
                        landscape: {
                            changePoint: 640,
                            visibleItems: 2
                        },
                        tablet: {
                            changePoint: 768,
                            visibleItems: 3
                        }
                    }
                });

            });
        </script>
        <script type="text/javascript" src="/static/js/jquery.flexisel.js"></script>
    </div>
    <!-- Partners Ends Here --->
{% endblock %}

